import { ref, onMounted, watch, onUnmounted } from 'vue';
import { isWindow, isObject } from '@/utils/is';
import { useThrottleFn } from '@vueuse/core'; // 导入节流函数

// 定义一个滚动监听的hook
export function useScroll(refEl, options) {
	// 定义x和y的引用
	const refX = ref(0);
	const refY = ref(0);
	// 定义处理函数
	let handler = () => {
		// 如果是window对象
		if (isWindow(refEl.value)) {
			// 获取滚动的x和y值
			refX.value = refEl.value.scrollX;
			refY.value = refEl.value.scrollY;
		} else if (refEl.value) {
			// 如果是其他元素，获取滚动的x和y值
			refX.value = refEl.value.scrollLeft;
			refY.value = refEl.value.scrollTop;
		}
	};

	// 如果options是对象
	if (isObject(options)) {
		let wait = 0;
		// 如果设置了等待时间
		if (options.wait && options.wait > 0) {
			wait = options.wait;
			// 删除等待时间属性
			Reflect.deleteProperty(options, 'wait');
		}

		// 使用节流函数处理handler
		handler = useThrottleFn(handler, wait);
	}

	let stopWatch;
	// 在组件挂载时
	onMounted(() => {
		// 监听refEl的变化
		stopWatch = watch(
			refEl,
			(el, prevEl, onCleanup) => {
				// 如果新的元素存在
				if (el) {
					// 添加滚动事件监听
					el.addEventListener('scroll', handler);
				} else if (prevEl) {
					// 如果旧的元素存在，移除滚动事件监听
					prevEl.removeEventListener('scroll', handler);
				}
				// 清理函数
				onCleanup(() => {
					// 重置x和y的值，并移除滚动事件监听
					refX.value = refY.value = 0;
					el && el.removeEventListener('scroll', handler);
				});
			},
			{ immediate: true }
		);
	});

	// 在组件卸载时
	onUnmounted(() => {
		// 移除滚动事件监听
		refEl.value && refEl.value.removeEventListener('scroll', handler);
	});

	// 定义停止函数
	function stop() {
		// 停止监听
		stopWatch && stopWatch();
	}

	// 返回x和y的引用，以及停止函数
	return { refX, refY, stop };
}
